<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程管理</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.2/theme-chalk/index.css">
    <link rel="stylesheet" href="/static/global.css">
</head>
<body class="bg-gray">
<div id="app" class="admin" v-cloak>
    <div class="page-header">
        <div class="page-header_inner">
            <div class="admin-logo">
                <img src="/static/logo.png" style="width: 110px; height: auto ">
            </div>
            <div class="admin-header">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/admin/index.html' }">管理后台</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: '/admin/courseList.html' }">课程管理</el-breadcrumb-item>
                    <el-breadcrumb-item>课程详情</el-breadcrumb-item>
                </el-breadcrumb>
                <div class="header-link">
                    <el-link :underline="false" href="/user/account.html">返回个人中心</el-link>
                    <el-link :underline="false" href="/logout.html">退出</el-link>
                </div>
            </div>
        </div>
    </div>

    <div class="page-body" style="display: flex">
        <div class="page-side">
            <el-menu default-active="course" class="admin-menu" background-color="#273043">
                <el-menu-item index="index">
                    <a href="/admin/index.html"><i class="el-icon-data-analysis"></i> 概况总览</a>
                </el-menu-item>
                <el-submenu index="resource">
                    <template slot="title">
                        <i class="el-icon-receiving"></i> 素材中心
                    </template>
                    <el-menu-item index="resource-video"><a href="/admin/video.html">视频</a></el-menu-item>
                    <el-menu-item index="resource-image"><a href="/admin/image.html">图片</a></el-menu-item></el-menu-item>
                    <el-menu-item index="resource-carousel"><a href="/admin/carousel.html">轮播图</a></el-menu-item></el-menu-item>
                </el-submenu>
                <el-menu-item index="user">
                    <a href="/admin/userList.html"><i class="el-icon-user"></i> 用户管理</a>
                </el-menu-item>
                <el-menu-item index="course">
                    <a href="/admin/courseList.html"><i class="el-icon-reading"></i> 课程管理</a>
                </el-menu-item>
                <el-submenu index="tools" disabled>
                    <template slot="title">
                        <i class="el-icon-suitcase"></i> 助学工具
                    </template>
                    <el-menu-item index="tools-1">问答</el-menu-item>
                    <el-menu-item index="tools-2">作业</el-menu-item>
                    <el-menu-item index="tools-3">题库</el-menu-item>
                    <el-menu-item index="tools-4">考试</el-menu-item>
                </el-submenu>
            </el-menu>
        </div>

        <div class="page-main">

            <div class="admin-panel course-detail">
                <el-image :src="course.poster" class="course-detail_poster" style="width: 300px" v-if="course && course.poster">
                    <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline"></i>
                    </div>
                </el-image>
                <div class="course-detail_info">
                    <div>
                        <div class="course-title">{{course.name}}</div>
                        <div class="course-desc">{{course.desc}}</div>
                    </div>

                    <div>
                        <el-button size="small" type="default" plain  @click="editCourse()">编辑</el-button>
                        <el-popconfirm title="确定删除吗？" @confirm="delCourse">
                            <el-button slot="reference" size="small" type="danger" plain>删除</el-button>
                        </el-popconfirm>
                    </div>
                </div>
            </div>

            <div class="admin-panel padding-20">
                <el-tabs v-model="activeTab" class="course-detail-tabs">
                    <el-tab-pane :label="'章节（' + (course.lessons && course.lessons.length || 0) + '）'" name="first">
                        <div style="margin: 10px">
                            <el-button size="small" type="primary" @click="addLesson()">添加章节</el-button>
                        </div>
                        <el-table :data="course.lessons" stripe border>
                            <el-table-column type="index" width="50"></el-table-column>
                            <el-table-column prop="name" label="标题" min-width="650px"></el-table-column>
                            <el-table-column prop="type" label="总课时" width="100" align="center">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.type === 'live'">直播</span>
                                    <span v-if="scope.row.type === 'video'">录播</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="duration" label="时长" min-width="120px">
                                <template slot-scope="scope">
                                    {{scope.row.duration | duration}}
                                </template>
                            </el-table-column>
                            <el-table-column prop="createdTime" label="发布时间" width="140" align="center">
                                <template slot-scope="scope">
                                    {{scope.row.createdTime | date}}
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="120">
                                <template slot-scope="scope">
                                    <el-link type="primary" size="small" @click="editLesson(scope.row)" style="margin-right: 20px">编辑</el-link>
                                    <el-popconfirm title="确定删除吗？" @confirm="delLessonFromCourse(scope.row)">
                                        <el-link slot="reference" type="danger" size="small" :underline="false">删除</el-link>
                                    </el-popconfirm>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>

                    <el-tab-pane :label="'学员（' + course.students + '）'" name="second">
                        <el-table :data="student.list" stripe border>
                            <el-table-column type="index" width="50"></el-table-column>
                            <el-table-column label="头像" width="80">
                                <template slot-scope="scope">
                                    <el-avatar :size="40" :src="scope.row.user.avatar"></el-avatar>
                                </template>
                            </el-table-column>
                            <el-table-column label="昵称" width="120">
                                <template slot-scope="scope">
                                    {{scope.row.user.nickname}}
                                </template>
                            </el-table-column>
                            <el-table-column label="手机号" width="140">
                                <template slot-scope="scope">
                                    {{scope.row.user.mobile}}
                                </template>
                            </el-table-column>
                            <el-table-column label="有效状态" width="140" align="center">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.status === 'ACTIVE'">有效</span>
                                    <span v-if="scope.row.status === 'EXPIRED'" class="font-red">已过期</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="加入时间" width="140" align="center">
                                <template slot-scope="scope">
                                    {{scope.row.joinTime | date}}
                                </template>
                            </el-table-column>
                            <el-table-column label="累计学习" width="140" align="center">
                                <template slot-scope="scope">
                                    {{(scope.row.studiedMins / 60).toFixed(2)}} 小时
                                </template>
                            </el-table-column>
                            <el-table-column label="学习进度" min-width="240" align="center">
                                <template slot-scope="scope">
                                    <el-progress :text-inside="true" :stroke-width="26" :percentage="((scope.row.studiedMins / 60) * 100 / course.hour).toFixed(0)"></el-progress>
                                </template>
                            </el-table-column>
                        </el-table>

                        <el-pagination :current-page="student.page"
                                       :page-size="student.size"
                                       :total="student.total"
                                       :hide-on-single-page="true"
                                       @current-change="loadStudent"
                                       layout="prev, pager, next"
                                       class="mm_pagination"
                                       background>
                        </el-pagination>

                    </el-tab-pane>

                    <el-tab-pane label="评价" name="fourth">
                        暂不开发
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>

    <el-dialog title="编辑课程" :visible.sync="editCourseDialog.show" width="600px" :close-on-click-modal="false">
        <el-form :model="editCourseDialog.form" label-width="80px">
            <el-form-item label="课程名">
                <el-input v-model="editCourseDialog.form.name" placeholder="课程名" maxlength="20"></el-input>
            </el-form-item>
            <el-form-item label="课程简介">
                <el-input type="textarea" v-model="editCourseDialog.form.desc" placeholder="课程简介" maxlength="100" rows="5" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="课程封面">
                <el-select v-model="editCourseDialog.form.poster"
                           placeholder="选择课程封面（需要提前在素材中心中上传）"
                           style="width: 100%">
                    <el-option
                            v-for="item in meta.images"
                            :key="item.id"
                            :label="item.name"
                            :value="item.url">
                        <div style="display: flex; justify-content: space-between">
                            <image :src="item.url" style="height: 80px;"></image>
                            <div>
                                <div style="font-size: 14px; font-weight: bold">{{item.name}}</div>
                                <div style="text-align: right">{{item.size | size}}</div>
                            </div>
                        </div>
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="授课老师">
                <el-input v-model="editCourseDialog.form.teacher" placeholder="授课老师"课程封面></el-input>
            </el-form-item>
            <el-form-item label="总课时">
                <el-input-number :controls="false" v-model="editCourseDialog.form.hour" placeholder="总课时（小时）" :min="1"></el-input-number>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button type="default" @click="editCourseDialog.show = false">取消</el-button>
            <el-button type="primary" @click="saveCourse">确 定</el-button>
        </span>
    </el-dialog>

    <el-dialog title="添加章节（支持批量）" :visible.sync="addLessonDialog.show" width="600px" :close-on-click-modal="false">
        <div class="lesson" v-for="(lesson, index) in addLessonDialog.addLessons" v-if="addLessonDialog.addLessons.length > 0">

            <div style="display: flex; flex-direction: row">
                <div style="min-width: 520px;">
                    <el-input v-model="lesson.name" placeholder="章节标题" :max-length="20"></el-input>
                    <div style="display: flex; flex-direction: row; justify-content: space-between; margin-top: 20px">
                        <el-select v-model="lesson.type" placeholder="课程类型" style="width: 120px">
                            <el-option
                                    v-for="item in meta.lessonType"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                    :disabled="item.disabled">
                            </el-option>
                        </el-select>
                        <el-select v-model="lesson.resource"
                                   placeholder="选择视频素材（需要提前在素材中心中上传）"
                                   style="margin-left: 20px; width: 460px"
                                   filterable>
                            <el-option
                                    v-for="item in meta.videos"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.url">
                                <span style="float: left">{{ item.name }}</span>
                                <span style="float: right; color: #8492a6; font-size: 12px">{{ item.duration | duration }}</span>
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div style="width: 40px;text-align: center;line-height: 36px;" v-if="addLessonDialog.addLessons.length > 1">
                    <el-link type="danger" @click="addLessonDialog.addLessons.splice(index, 1)" :underline="false">
                        <i class="el-icon-delete"></i>
                    </el-link>
                </div>
            </div>

            <el-divider></el-divider>
        </div>

        <el-link type="primary" :underline="false" @click="addLessonDialog.addLessons.push({name:null, type:'video'})">添加章节</el-link>

        <span slot="footer" class="dialog-footer" v-if="addLessonDialog.addLessons.length > 0">
            <el-button type="default" @click="addLessonDialog.show = false">取消</el-button>
            <el-button type="primary" @click="addLessonToCourse">确 定</el-button>
        </span>
    </el-dialog>

    <el-dialog title="编辑章节" :visible.sync="editLessonDialog.show" width="600px" :close-on-click-modal="false">
        <el-input v-model="editLessonDialog.form.name" placeholder="章节标题" :max-length="20"></el-input>
        <div style="display: flex; flex-direction: row; justify-content: space-between; margin-top: 20px">
            <el-select v-model="editLessonDialog.form.type" placeholder="课程类型" style="width: 120px">
                <el-option
                        v-for="item in meta.lessonType"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        :disabled="item.disabled">
                </el-option>
            </el-select>
            <el-select v-model="editLessonDialog.form.resource" placeholder="选择视频素材（需要提前在素材中心中上传）" style="margin-left: 20px; width: 460px" filterable>
                <el-option
                        v-for="item in meta.videos"
                        :key="item.id"
                        :label="item.name"
                        :value="item.url">
                    <span style="float: left">{{ item.name }}</span>
                    <span style="float: right; color: #8492a6; font-size: 12px">{{ item.duration | duration }}</span>
                </el-option>
            </el-select>
        </div>

        <span slot="footer" class="dialog-footer">
            <el-button type="default" @click="editLessonDialog.show = false">取消</el-button>
            <el-button type="primary" @click="saveLesson">确 定</el-button>
        </span>
    </el-dialog>
</div>

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.2/index.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
<script src="/static/global.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                courseId: this.$request.params.courseId,
                course: {},
                student: {},
                activeTab: 'first',
                editCourseDialog: {
                    show: false,
                    form: {}
                },
                addLessonDialog: {
                    show: false,
                    addLessons:[]
                },
                editLessonDialog: {
                    show: false,
                    form: {}
                },
                meta: {
                    lessonType: [
                        {value: 'video', label: '录播课'},
                        {value: 'live', label: '直播课', disabled: true},
                        {value: 'operate', label: '实操课', disabled: true},
                    ],
                    videos: [],
                    images: []
                }
            }
        },
        methods: {
            loadCourse: function () {
                let vue = this;

                let url = '/course/detail?courseId=' + vue.courseId;
                axios.get(url).then(resp => {
                    vue.course = resp.data || {};

                    document.title = vue.course.name;
                });
            },
            loadStudent: function (page = 1) {
                let vue = this;

                let url = `/admin/course/student?page=${page}&size=10&courseId=${vue.courseId}`;
                axios.get(url).then(resp => {
                    vue.student = resp.data || {};
                });
            },
            loadResources: function () {
                let vue = this;

                axios.get('/admin/resource/video').then(resp => {
                    vue.meta.videos = resp.data || [];
                });

                axios.get('/admin/resource/image').then(resp => {
                    vue.meta.images = resp.data || [];
                });
            },
            editCourse: function () {
                let vue = this;

                this.editCourseDialog.form = JSON.parse(JSON.stringify(vue.course));
                this.editCourseDialog.show = true;
            },
            saveCourse: function () {
                let vue = this;

                axios.put('/admin/course/' + vue.course.id, vue.editCourseDialog.form).then(resp => {
                    vue.$message.success('保存成功');
                    vue.editCourseDialog.show = false;
                    vue.course = vue.editCourseDialog.form;
                });
            },
            delCourse: function () {
                let vue = this;

                axios.delete('/admin/course/' + vue.course.id).then(resp => {
                    window.location.href = '/admin/courseList.html';
                });
            },
            addLesson: function () {
                let vue = this;
                this.addLessonDialog.addLessons = [{name:null, type:'video', resource: null, duration: 0}];
                this.addLessonDialog.show = true;
            },
            addLessonToCourse: function () {
                let vue = this;

                vue.addLessonDialog.addLessons.forEach( i => {
                    let resource = vue.meta.videos.find(r => r.url === i.resource);
                    if (resource) {
                        i.duration = resource.duration;
                        i.resourceId = resource.id;
                    }
                });

                axios.post('/admin/course/' + vue.course.id + '/addLesson', vue.addLessonDialog.addLessons).then(resp => {
                    vue.$message.success('保存成功');
                    vue.addLessonDialog.show = false;
                    vue.loadCourse();
                });
            },
            editLesson: function (lesson) {
                let vue = this;
                vue.editLessonDialog.show = true;
                vue.editLessonDialog.lessonId = lesson.id;
                vue.editLessonDialog.form = JSON.parse(JSON.stringify(lesson));
            },
            saveLesson: function () {
                let vue = this;

                let resource = vue.meta.videos.find(r => r.url === vue.editLessonDialog.form.resource);
                if (resource) {
                    vue.editLessonDialog.form.duration = resource.duration;
                    vue.editLessonDialog.form.resourceId = resource.id;
                }

                let url = '/admin/course/' + vue.courseId + '/lesson/' + vue.editLessonDialog.lessonId;
                axios.put(url, vue.editLessonDialog.form).then(resp => {
                    vue.$message.success('保存成功');
                    vue.editLessonDialog.show = false;
                    vue.loadCourse();
                });
            },
            delLessonFromCourse: function (lesson) {
                let vue = this;

                let url = '/admin/course/' + vue.courseId + '/lesson/' + lesson.id;
                axios.delete(url).then(resp => {
                    vue.course.lessons = vue.course.lessons.filter(i => i.id !== lesson.id);
                });
            }
        },
        mounted: function () {
            this.loadCourse();
            this.loadStudent();
            this.loadResources();
        }
    })
</script>
</html>